<script setup>
import {CaretBottom, Management, Promotion, SwitchButton, User, UserFilled} from '@element-plus/icons-vue'

import {userLoginStore} from '@/stores/modules/userLogin'
import {useRouter} from 'vue-router'

const router = useRouter()
const loginStore = userLoginStore()

const outLogin = async () => {
  await ElMessageBox.confirm('确认退出?', '温馨提示', {
    type: 'waring',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
      .then(() => {
        loginStore.setIsLogin(false)
        loginStore.setId("")
        loginStore.setType(0)
        loginStore.setAccount("")
        loginStore.setToken("")
        localStorage.removeItem('token')
        router.push('/common/login')
        return
      })
      .catch((e) => {
        console.log(e)
        return
      })
}

const Login = () => {
  router.push('/common/login')
}
</script>

<template>
  <el-container class="layout-container">
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <el-menu
          active-text-color="#ffd04b"
          background-color="rgb(33, 38, 68)"
          text-color="#fff"
          router
      >
        <el-menu-item index="/home">
          <el-icon>
            <Promotion/>
          </el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="/saleManage" v-if="loginStore.type == 1">
          <template #title>
            <el-icon>
              <Promotion/>
            </el-icon>
            <span>销售管理员</span>
          </template>
          <el-menu-item index="/saleManage/customers">
            <el-icon>
              <Management/>
            </el-icon>
            <span>客户信息</span>
          </el-menu-item>
          <el-menu-item index="/saleManage/employees">
            <el-icon>
              <Management/>
            </el-icon>
            <span>员工信息</span>
          </el-menu-item>
          <el-menu-item index="/saleManage/contracts">
            <el-icon>
              <Management/>
            </el-icon>
            <span>合同</span>
          </el-menu-item>
          <el-menu-item index="/saleManage/turnover">
            <el-icon>
              <Management/>
            </el-icon>
            <span>营业额</span>
          </el-menu-item>
        </el-sub-menu>


        <el-sub-menu index="/sale" v-if="loginStore.type == 2">
          <template #title>
            <el-icon>
              <UserFilled/>
            </el-icon>
            <span>销售人员</span>
          </template>
          <el-menu-item index="/sale/myOrders">
            <el-icon>
              <Management/>
            </el-icon>
            <span>我的合同</span>
          </el-menu-item>
          <el-menu-item index="/sale/mySales">
            <el-icon>
              <User/>
            </el-icon>
            <span>个人销售额</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="/warehouse" v-if="loginStore.type == 3">
          <template #title>
            <el-icon>
              <UserFilled/>
            </el-icon>
            <span>仓库管理员</span>
          </template>
          <el-menu-item index="/warehouse/goods">
            <span>货品</span>
          </el-menu-item>
          <el-menu-item index="/warehouse/orders">
            <span>发货单</span>
          </el-menu-item>
          <el-menu-item index="/warehouse/purchaseOrders">
            <span>进货单</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <div></div>
        <el-dropdown placement="bottom-end">
          <span class="el-dropdown__box">
            <div class="user_name">
              {{
                !loginStore.account ? '未登录' : loginStore.account
              }}
            </div>
            <el-icon>
              <CaretBottom/>
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                  command="logout"
                  :icon="SwitchButton"
                  @click="Login"
                  v-if="!loginStore.isLogin"
              >登录
              </el-dropdown-item
              >
              <el-dropdown-item
                  command="logout"
                  :icon="SwitchButton"
                  @click="outLogin"
                  v-if="loginStore.isLogin"
              >退出登录
              </el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>销售管理系统 ©2024 Created by DGUT/220508</el-footer>
    </el-container>
  </el-container>
</template>
<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  //min-height: 100vh;
  //width: 100%;
  //max-width: 100%;

  .el-aside {
    background-color: rgb(33, 38, 68);

    &__logo {
      height: 120px;
      background: url('@/assets/pagehomelogo.png') no-repeat center / 120px auto;
    }

    .el-menu {
      border-right: none;
    }
  }

  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}

.user_name {
  font-size: 18px;
  font-weight: bolder;
}
</style>
